<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react 分为 react-dom页面开发和  react--native app开发 所有功能要拆分 -->
    <!-- react核心包,提供了操作react的所有必要功能, 但是不提供Dom操作的相关功能, web和app都使用 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- reactDOM, 提供支持操作dom的相关功能 -->
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 添加后可直接使用jsx语法 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>
    <script type="text/babel">
        console.log(1111, ReactDOM)
        const reactRoot = ReactDOM.createRoot(document.getElementById('root'))
        // 直接使用jsx 创建组件
        // jsx 提供在js中编写xml(html)的功能,类似母模板语言,   jsx本质是React.createElement()函数的语法糖

        // 我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中
        const element = (
            <div>
                <h1>Hello!</h1>
                <h2>Good to see you here.</h2>
            </div>
        );
        // 假如一个标签里面没有内容，你可以使用 /> 来闭合标签
        const element1 = <img src={'dfdfdf'} />;

        // 在 JSX 中嵌入表达式 ++++++++
        // 你可以在大括号内放置任何有效的 JavaScript 表达式。2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。
        const name = 'Josh Perez';
        const user = {
            firstName: 'cheng',
            lastName: 'chao',
            avatarUrl: 'https://www.legacy.reactjs.org'
        }
        function formatName(user) {
            return user.firstName + ' ' + user.lastName;
        }
        const element2 = <h1>Hello, {name} <br /> {2 + 2} <br /> {user.firstName} <br />  {formatName(user)}</h1>;


        // JSX 也是一个表达式 ++++++
        // 在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
        // jsx 可以作为变量  函数输入输出值使用
        function getGreeting(user) {
            if (user) {
                return <h1>Hello, {formatName(user)}!</h1>;
            }
            return <h1>Hello, Stranger.</h1>;
        }

        // JSX 中指定属性+++++++    
        // 不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号
        // 所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称
        // JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
        const elementImg = <img src={user.avatarUrl}></img>;

        // 使用 JSX 指定子元素+++++++++
        // 可以定义为对象
        const element11 = <img src={user.avatarUrl} />;
        const element22 = (
            <div>
                <h1>Hello!</h1>
                <h2>Good to see you here.</h2>
            </div>
        );

        //JSX 防止注入攻击 ++++++++++
        // React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容
        const title = response.potentiallyMaliciousInput;
        // 直接使用是安全的：
        const element223 = <h1>{title}</h1>;

        // JSX 表示对象 ++++++++++
        // React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：这些对象被称为 “React 元素
        const element323 = (
            <h1 className="greeting">
                Hello, world!
            </h1>
        );
        const element3232 = React.createElement(
            'h1',
            { className: 'greeting' },
            'Hello, world!'
        );


        // 规则 +++++
        // 1.根节点只能有一个标签  用<></> 或者<React.Fragment></React.Fragment>包裹
        // 2.不是使用关键字 class使用className替代 label.for 使用 htmlFor代替
        // 3.标签要闭合
        // 4.正确在jsx中使用注释
        // {/* 正确 */}
        // {
            // 双斜杠注释需要换行
        // }

        reactRoot.render(
            <React.Fragment>
                {element}
                {element2}
            </React.Fragment>
        )
    </script>
</body>

</html>